<vg-player (onPlayerReady)="onPlayerReady($event)">
    <ng-container *ngIf="activeCuePoints">
        <div *ngFor="let cuePointData of activeCuePoints" class="info-layer">
            <h3><a [href]="cuePointData?.href" target="_blank">{{ cuePointData?.title }}</a></h3>
            <p>
                <img [src]="cuePointData?.src" align="left">
                {{ cuePointData?.description }}
            </p>
        </div>
    </ng-container>

    <div class="cue-point-manager-layer" *ngIf="showCuePointManager">
        <div class="close fa fa-close" (click)="showCuePointManager = false"></div>

        <div class="cue-list">
            <table class="cue-table">
                <thead>
                <tr class="cue-row">
                    <th>Start Time</th>
                    <th>End Time</th>
                    <th class="json-header">JSON</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let cue of track?.cues" class="cue-row">
                    <td>{{ cue.startTime }}</td>
                    <td>{{ cue.endTime }}</td>
                    <td class="json">{{ json.parse(cue.text).title }}</td>
                    <td class="actions">
                        <button type="button" (click)="onClickRemove(cue)">Remove</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="add-cue">
            <h2>Add a Cue Point dynamically</h2>
            <p>(all fields are required)</p>

            <form name="cueForm"
                  #formRef="ngForm"
                  (submit)="onSubmit(formRef, $event)">
                <div class="form-field">
                    <label for="startTime">Start Time</label>
                    <input type="number" id="startTime" name="startTime" [(ngModel)]="newCue.startTime" required>
                </div>
                <div class="form-field">
                    <label for="endTime">End Time</label>
                    <input type="number" id="endTime" name="endTime" [(ngModel)]="newCue.endTime" required>
                </div>
                <div class="form-field">
                    <label for="title">Title</label>
                    <input type="text" id="title" name="title" [(ngModel)]="newCue.title" required>
                </div>
                <div class="form-field">
                    <label for="description">Description</label>
                    <input type="text" id="description" name="description" [(ngModel)]="newCue.description" required>
                </div>
                <div class="form-field">
                    <label for="src">Image URL</label>
                    <input type="text" id="src" name="src" [(ngModel)]="newCue.src" required>
                </div>
                <div class="form-field">
                    <label for="href">Link</label>
                    <input type="text" id="href" name="href" [(ngModel)]="newCue.href" required>
                </div>

                <button type="submit" [disabled]="!formRef.valid">Add Cue</button>
            </form>
        </div>
    </div>

    <vg-overlay-play></vg-overlay-play>

    <vg-controls>
        <vg-play-pause></vg-play-pause>
        <vg-playback-button></vg-playback-button>

        <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

        <vg-scrub-bar>
            <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
            <vg-scrub-bar-cue-points [vgCuePoints]="metadataTrack.cues"></vg-scrub-bar-cue-points>
        </vg-scrub-bar>

        <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
        <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

        <div class="cue-point-manager-button fa fa-thumb-tack" (click)="showCuePointManager = !showCuePointManager"></div>
        <vg-mute></vg-mute>

        <vg-fullscreen></vg-fullscreen>
    </vg-controls>

    <video #media [vgMedia]="media" id="singleVideo" preload="auto" crossorigin>
        <source *ngFor="let video of sources" [src]="video.src" [type]="video.type">

        <track src="assets/data/cue-points.vtt" kind="metadata" label="Cue Points" default
               #metadataTrack
               vgCuePoints
               (onEnterCuePoint)="onEnterCuePoint($event)"
               (onExitCuePoint)="onExitCuePoint($event)">
    </video>
</vg-player>



